<template>
    <div style="margin-bottom: 1.5rem">
        <div class="userBack">
            <p>个人中心 <button class="logout" @click="logout()">退出登录</button></p>
            <div class="user_infromation">
                <img :src="user.user_avatar" alt="">
                <div>
                    <p>账号：{{ user.user_nickname }}</p>
                    <p>余额：<span>{{ user.user_balance }}</span></p>
                </div>
            </div>
        </div>
        <!--Center  收益概况-->
        <div class="Center_money">
            <ul>
                <li>
                    <p>今日收益</p>
                    <p><b>{{ user.totay_money }}</b></p>
                    <p><span>已获取</span></p>
                </li>
                <li>
                    <p>预计佣金</p>
                    <p><b>{{ user.audit_money }}</b></p>
                    <p><span>待审核</span></p>
                </li>
                <li>
                    <p>累计收益</p>
                    <p><b>{{ user.finish_money   }}</b></p>
                    <p><span>已获得</span></p>
                </li>
            </ul>
        </div>
        <!--Center next  排版-->
        <div class="Center_next">
            <ul>
                <li @click="Center_next(1)">
                    <img src="../../img_myself/a1.png" alt="">
                    <p>个人资料</p>
                </li>
                <li @click="Center_next(2)">
                    <img src="../../img_myself/a2.png" alt="">
                    <p>佣金明细</p>
                </li>
                <li @click="Center_next(3)">
                    <img src="../../img_myself/a3.png" alt="">
                    <p>提现管理</p>
                </li>
                <li @click="Center_next(4)">
                    <img src="../../img_myself/a4.png" alt="">
                    <p>推荐有奖</p>
                </li>
            </ul>
        </div>
        <!--轮播-->
        <!--<div class="banner_swier">-->
        <!--<img src="../../img_myself/banners.png" alt="">-->
        <!--</div>-->

        <div class="banner_swier">
            <div class="swiper-container swiper-container1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="imgs in bannerImgs"><a :href="hdlink"><img :src=" imgs.img"></a></div>
                </div>
            </div>
        </div>

        <!--BOTTOM  list-->
        <ul class="Bottom_list">
            <li @click="listNum(1)">
                <div>
                    <img src="../../img_myself/b1.png" alt="">
                    <span>赚钱风云榜</span>
                </div>
                <img src="../../img_myself/right.png" alt="">
            </li>
            <li @click="listNum(2)">
                <div>
                    <img src="../../img_myself/b2.png" alt="">
                    <span>绑定任务号</span>
                </div>
                <img src="../../img_myself/right.png" alt="">
            </li>
            <li>
                <a href="https://wb.renqidaren.com/app_html/help_center.html">
                    <div>
                        <img src="../../img_myself/b3.png" alt="">
                        <span>帮助中心</span>
                    </div>
                    <img src="../../img_myself/right.png" alt="">
                </a>
            </li>
            <li v-if="qq_flock">
                <div>
                    <img src="../../img_myself/b4.png" alt="">
                    <span v-clipboard="qq_flock" @success="handleSuccess" @error="handleError">达人粉丝QQ群：{{ qq_flock }}</span>
                </div>
                <img src="../../img_myself/right.png" alt="">
            </li>
        </ul>
        <barTab/>
    </div>
</template>

<script>
    import barTab from '@/components/components/barTabBottom';
    import api from '../../utils/api';

    export default {
        name: "Myself",
        components: {
            barTab
        },
        data(){
            return{
                bannerImgs: [
                    {img: 'https://imgshangjia.renqidaren.com/uploads/20181029/d8cb9a438aa18b5f0c5712aad2794f1e.png'}
                ],
                user: [],
                hdlink: localStorage.getItem('activity') + '?token=' + localStorage.getItem('token') + '&game=1',
                qq_flock: false
            }
        },
        created() {
            localStorage.setItem('bartabInx', 4)
            this.qq_flock = localStorage.getItem('qq_flock')

        },
        methods: {
            handleSuccess(e) {
                this.$toast('复制成功')
            },
            handleError(e) {
                this.$toast('复制失败，此机型不支持微信端复制')
            },
            Center_next(int) {
                if (int == 1) {
                    this.$router.push({path: '/task/Myinformation'});
                } else if (int == 2) {
                    this.$router.push({
                        name: 'Commission',
                        params: {
                            num: 1
                        }
                    })
                } else if (int == 3) {
                    this.$router.push({path: '/task/putMoney'});
                } else if (int == 4) {
                    this.$router.push({path: '/task/Apprentice'});
                }
            },
            listNum: function (index) {
                if (index == 1) {
                    this.$router.push({path: '/task/Rankinglist'});
                } else if (index == 2) {
                    this.$router.push({path: '/task/bindingTab'});
                }
            },
            loop: function (e) {
                this.$nextTick(() => {
                    new Swiper('.swiper-container1', {
                        autoplay: 3000
                    })
                })
            },
        //    userName
            userFun(){
                api.request('/user', 'get', {}).then((resp) => {
                    this.user = resp.data.data;
                })
            },
            logout() {
                var _that = this;
                api.request('/logout', 'post', {}).then((resp) => {
                    localStorage.clear()
                    _that.$router.push({path: '/task/Login'});
                })
            }
        },
        mounted() {
            this.userFun();
            document.body.scrollTop = 0;
            this.loop();
        },

    }
</script>

<style scoped="css">
    @import "../../style/Myself.css";
</style>
